<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport"
          content="width=device-width, initial-scale=1.0, maximum-scale=1.0,user-scalable=no,minimal-ui">
    <title>淘淘商城</title>
    <link rel="icon" href="../../style/images/logo.png">
    <!--element-ui的样式-->
    <link rel="stylesheet" href="../../style/common.css"/>
    <!--    <link rel="stylesheet" href="../../style/shoppingCart.css"/>-->
    <link rel="stylesheet" href="../../style/address.css"/>
    <link rel="stylesheet" href="../../element-ui/index.css"/>
    <style>
        .el-button--primary {
            width: 80px !important;
            color: #fcfbfa;
            background-color: #409EFF;
            border-color: #409EFF;
        }

        .el-header {
            padding: 0 !important;
            background-color: white;
            color: #333;
            text-align: center;
            height: 140px !important;
        }

    </style>
</head>
<body>
<div id="app">
    <el-container>
        <el-header style="">
            <div>
                <div class="headerTop">
                    <div  >
                        <el-menu background-color="rgb(245,245,245)"
                                 style="float: right;" class="el-menu-demo" mode="horizontal">
                            <el-menu-item v-show="showUser" style="color: rgb(255,68,0) !important;" index="1"><a
                                    href="login.html">亲，请登录</a></el-menu-item>
                            <el-submenu v-show="!showUser" index="1">
                                <template style="" slot="title">
                                    <a style="color: rgb(255,68,0) !important;"
                                       href="user.html">欢迎您，{{user.username}}</a></template>
                                <el-menu-item style="height: 80px" index="2-1">
                                    <div style="">
                                        <a href="user.html">
                                            <el-image
                                                    style="width: 70px; height: 70px; border: none;border-radius: 50%;cursor: pointer;"
                                                    :src="getImage(user.avatar)"
                                                    :preview-src-list="[ `/common/download?name=${user.avatar}` ]">
                                                <div slot="error" class="image-slot">
                                                    <img src="../../style/images/淘公仔2.png"
                                                         style="width: auto; height: 70px; border:none;">
                                                </div>
                                            </el-image>
                                        </a>
                                        <a href="user.html"> &nbsp;&nbsp;账号管理</a> &nbsp;&nbsp;|&nbsp;&nbsp;
                                        <a @click="logout()">退出</a>
                                    </div>
                                </el-menu-item>
                            </el-submenu>

                            <el-menu-item index="2"><a href="register.html">免费注册</a></el-menu-item>
                        </el-menu>
                    </div>
                    <div  >
                        <el-menu background-color="rgb(245,245,245)"
                                 style="float: right;" class="el-menu-demo" mode="horizontal"
                        >

                            <el-menu-item index="1"><a href="index.html" target="_blank">返回首页</a></el-menu-item>
                            <el-menu-item index="2"><a href="user.html" target="_blank">我的淘淘</a></el-menu-item>
                            <el-menu-item index="3"><a href="#" target="_blank">我的足迹</a></el-menu-item>
                            <el-menu-item index="4" class="el-icon-shopping-cart-2"
                                          style="color: rgb(255,68,0) !important;font-size: 16px !important;">
                                <a href="shoppingCart.html" target="_blank"
                                   style="color: rgb(108,108,108) !important;font-size: 12px !important;">&nbsp;&nbsp;购物车</a>
                            </el-menu-item>
                            <el-menu-item class="el-icon-star-on" style="font-size: 16px !important;" index="5">
                                <a style="font-size: 12px !important;" href="#" target="_blank">&nbsp;收藏的宝贝
                                </a></el-menu-item>
                        </el-menu>
                    </div>
                </div>
                <div class="headerSecond"  >
                    <div class="headerSecond-wrapper"  >
                        <div style="display: flex;align-items: center;">
                            <h1 class="Mytao">
                                <a href="user.html">我的淘淘</a></h1>
                            <div style="margin-left: 50px">
                                <el-menu id="menu" style="" class="el-menu-demo" mode="horizontal">
                                    <el-menu-item index="1"><a class="menu" href="user.html">首页</a></el-menu-item>
                                    <el-submenu index="2">
                                        <template slot="title"><b class="menu">账号设置</b></template>
                                        <el-menu-item index="2-1"><a style="" class="menu" href="address.html">收货地址</a>
                                        </el-menu-item>
                                        <el-menu-item index="2-2"><a class="menu" href="userInfo.html">修改资料</a>
                                        </el-menu-item>
                                    </el-submenu>
                                </el-menu>
                            </div>


                        </div>

                    </div>
                </div>
            </div>

        </el-header>
        <el-main id="main" >
            <div>
                <el-backtop target=".main" style="color: rgb(255,68,0)"></el-backtop>
                <div>
                    <div class="divContainer">
                        <div class="container">
                            <h4 style="width: 100%;padding-left: 20px;background-color: rgba(102,177,255,0.09)">地址</h4>
                            <div>
                                <el-form

                                        ref="ruleForm"
                                        :model="ruleForm"
                                        :rules="rules"
                                        :inline="false"
                                        label-width="100px"
                                        class="demo-ruleForm"
                                >
                                    <el-form-item class="form" label="地址信息:" prop="address">
                                        <el-cascader
                                                style="width: 320px"
                                                placeholder="请选择省/市/区"
                                                v-model="ruleForm.address"
                                                :props="{ checkStrictly: true }"
                                                :options="province"
                                                separator="/"
                                                @change="handleChange">

                                        </el-cascader>
                                    </el-form-item>
                                    <el-form-item label="详细地址:" prop="detail">
                                        <el-input v-model="ruleForm.detail"
                                                  type="textarea"
                                                  :rows="2"
                                                  placeholder="请输入详细地址信息，如道路、门牌号、小区、楼栋号、单元等信息"
                                                  maxlength="20"/>
                                    </el-form-item>

                                    <el-form-item label="邮政编码:" prop="postcode">
                                        <el-input v-model="ruleForm.postcode"
                                                  placeholder="请输入邮编"
                                                  maxlength="20"/>
                                    </el-form-item>

                                    <el-form-item label="收货人姓名:" prop="consignee">
                                        <el-input align="left" v-model="ruleForm.consignee"
                                                  placeholder="请输入收货人姓名"
                                                  maxlength="12"/>
                                    </el-form-item>

                                    <el-form-item label="性别:" prop="sex">
                                        <el-radio-group v-model="ruleForm.sex">
                                            <el-radio label="先生"></el-radio>
                                            <el-radio label="女士"></el-radio>
                                        </el-radio-group>
                                    </el-form-item>

                                    <el-form-item label="手机号:" prop="phone">
                                        <el-input v-model="ruleForm.phone"
                                                  placeholder="请输入手机号"
                                                  maxlength="20"/>
                                    </el-form-item>

                                    <el-form-item label="标签:" prop="label">
                                        <el-input v-model="ruleForm.label"
                                                  placeholder="家庭/学校/公司等"
                                                  maxlength="20"/>
                                    </el-form-item>

                                    <el-checkbox style="margin: 0 0 20px 160px" v-model="ruleForm.is_default">设置为默认收货地址
                                    </el-checkbox>

                                    <div class="subBox address">
                                        <el-form-item>

                                            <el-button v-show="!showBtn" type="primary" size="mini" @click="update">
                                                修改
                                            </el-button>
                                            <el-button v-show="showBtn" type="primary" size="mini" @click="save">
                                                保存
                                            </el-button>

                                        </el-form-item>
                                    </div>
                                </el-form>
                            </div>
                        </div>
                        <div class="right">

                            <h4  class="el-icon-warning-outline"
                                 style="color: #66b1ff;width: 100%;
                                 padding-left: 20px;background-color: rgba(102,177,255,0.09)">
                                <span  style="color: black;font-weight: bold">
                                    已保存
                                    <span style="color: #66b1ff">{{tableData.length}}&nbsp;</span>了条地址，还能保存
                                    <span style="color: #66b1ff">{{6-tableData.length}}&nbsp;</span>条地址
                                </span>
                            </h4>
                            <div class="Parallelograms">
                                <div v-for="Parallelogram2 in 20" class="Parallelogram"></div>
                            </div>
                            <div style="background-color: white">
                                <template>
                                    <el-table
                                            :fit="true"
                                            :border="true"
                                            :data="tableData"
                                            style="background-color: white;width: 100%;font-size: 12px">
                                        <el-table-column
                                                prop="consignee"
                                                label="收货人"
                                        >
                                        </el-table-column>
                                        <el-table-column
                                                prop="address"
                                                label="所在地区">
                                        </el-table-column>

                                        <el-table-column
                                                prop="detail"
                                                label="详细地址">
                                        </el-table-column>

                                        <el-table-column
                                                prop="postcode"
                                                label="邮编">
                                        </el-table-column>
                                        <el-table-column
                                                prop="phone"
                                                label="电话">
                                        </el-table-column>

                                        <el-table-column
                                                prop="label"
                                                label="标签"
                                        >
                                            <template slot-scope="scope">
                                                <el-tag
                                                        :type="scope.row.label === '家' ? 'primary' : 'success'"
                                                        disable-transitions>{{scope.row.label}}
                                                </el-tag>
                                            </template>
                                        </el-table-column>

                                        <el-table-column
                                                width="250px" label="操作" align="center">
                                            <template slot-scope="scope">
                                                <el-button
                                                        size="mini"
                                                        @click="handleEdit(scope.$index, scope.row)">修改
                                                </el-button>
                                                <el-button
                                                        size="mini"
                                                        type="danger"
                                                        @click="handleDelete(scope.$index, scope.row)">删除
                                                </el-button>
                                                <el-button
                                                        v-show="(scope.row.isDefault !== 1)"
                                                        size="mini"
                                                        type="danger"
                                                        @click="handleDefault(scope.$index, scope.row)">设为默认
                                                </el-button>
                                                <el-button class="default" size="mini"  v-show="(scope.row.isDefault === 1)" >默认地址
                                                </el-button>
                                            </template>
                                        </el-table-column>
                                    </el-table>
                                </template>

                            </div>
                        </div>

                    </div>
                </div>
            </div>
        </el-main>
    </el-container>
</div>
<script src="../../js/vue.js"></script>
<script src="../../element-ui/index.js"></script>
<!-- 引入axios -->
<script src="../../js/axios.min.js"></script>
<script src="../../js/frontInterceptors.js"></script>
<script src="../../js/validateAddress.js"></script>
<script src="../../js/common.js"></script>
<script>
    new Vue({
        el: "#app",
        data() {
            return {
                showBtn: true,
                tableData: [{
                    id: '1',
                    consignee: '王小虎',
                    address: '上海市普陀区金沙江路 1518 弄',
                    phone: '12346789',
                    label: '家',
                    detail: '12345',
                    isDefault: 1,
                    postcode: '123456',
                    sex: '先生'
                }],
                province: [],
                ruleForm: {
                    label: '',
                    consignee: '',
                    sex: '',
                    phone: '',
                    detail: '',
                    address: [],
                    is_default: false,
                    postcode: ''
                },
                form: {
                    address: [],
                    number: 0,
                },
                user: {},
                showUser: true,
            }
        },
        computed: {
            rules() {
                return {
                    //账号
                    detail: [{required: true, 'validator': checkDetailAddress, trigger: 'blur'}],
                    address: [{required: true, 'validator': checkAddress, trigger: 'blur'}],
                    consignee: [{required: true, 'validator': checkName, trigger: 'blur'}],
                    phone: [{required: true, 'validator': checkPhone, trigger: 'blur'}],
                }
            }

        },
        watch: {},
        created() {
            this.getProvince()
            this.selectAddress()

        },
        methods: {

            async selectAddress() {
                const {data: res} = await axios.get("/addressBook/list")
                // console.log(res.data)
                if (res.code === 1) {
                    res.data.forEach(item => {
                        item.consignee = item.consignee + ( item.sex === 1 ? '先生' : '女士')
                        item.address = (item.provinceName+ '/')  + (item.cityName + '/') + (item.districtName)
                    })

                    this.tableData = res.data

                } else {
                    this.$message({
                        message: '地址查询失败',
                        type: 'error'
                    })
                }
            },


            async handleEdit(index, row) {
                // console.log(row.isDefault);
                this.showBtn= false
                let gender = (row.consignee.charAt(row.consignee.length - 2) +
                    row.consignee.charAt(row.consignee.length - 1))

                let name = row.consignee.split(gender)[0]
                this.ruleForm = {
                    id: row.id,
                    sex: gender,
                    consignee: name,
                    phone: row.phone,
                    postcode: row.postcode,
                    detail: row.detail,
                    label: row.label,
                    is_default: row.isDefault === 1,
                }
            },


            async handleDefault(index, row) {

                const {data: res} = await axios.put('/addressBook/default?id='+ row.id)
                if (res.code === 1) {
                    this.$message({
                        message: res.data,
                        type: 'success'
                    })
                    this.selectAddress()
                } else {
                    this.$message({
                        message: '地址保存失败',
                        type: 'error'
                    })
                }
            },
            handleDelete(index, row) {
                // console.log(index, row);
                this.$confirm('确认要删除改地址吗？?', '删除地址', {
                    'confirmButtonText': '确定',
                    'cancelButtonText': '取消',
                }).then(() => {
                    axios.delete('/addressBook?ids=' + row.id).then((res => {
                            if (res.data.code === 1) {
                                this.$message({
                                    type: 'success',
                                    message: res.data.data
                                });
                                this.selectAddress()
                            } else {
                                this.$message({
                                    type: 'warning',
                                    message: res.data.data
                                });
                            }
                        })
                    )
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });
                });
            },
            clear(){
                this.ruleForm.id  = '',
                this.ruleForm.label  = '',
                this.ruleForm.consignee  = '',
                this.ruleForm.sex  = '',
                this.ruleForm.phone  = '',
                this.ruleForm.detail  = '',
                this.ruleForm.address  = '',
                this.ruleForm.postcode  = ''
            },
            async save() {
                if(this.ruleForm.address === undefined){
                    this.$message({
                        message: '请选择地址',
                        type: 'error'
                    })
                    return
                }
                this.$refs.ruleForm.validate(async (valid) => {
                        if (valid) {
                            let params = {
                                consignee: this.ruleForm.consignee,
                                sex: this.ruleForm.sex === '女士' ? 0 : 1,
                                phone: this.ruleForm.phone,
                                postcode: this.ruleForm.postcode,
                                provinceCode: this.ruleForm.address[0],
                                cityCode: this.ruleForm.address[1],
                                districtCode: this.ruleForm.address[2],
                                detail: this.ruleForm.detail,
                                label: this.ruleForm.label,
                                isDefault: this.ruleForm.is_default ? 1 : 0
                            }

                            const {data: res} = await axios.post('/addressBook', params)
                            if (res.code === 1) {
                                this.$message({
                                    message: res.data,
                                    type: 'success'
                                })
                                this.selectAddress()
                            } else {
                                this.$message({
                                    message: res.msg,
                                    type: 'error'
                                })
                            }
                        } else {
                            this.$message({
                                message: '格式错误',
                                type: 'error'
                            })
                        }
                        this.clear()
                        this.showBtn = true

                    }
                    )},
            async update() {
                if(this.ruleForm.address === undefined){
                    this.$message({
                        message: '请选择地址',
                        type: 'error'
                    })
                    return
                }
                this.$refs.ruleForm.validate(async (valid) => {
                        if (valid) {
                            let params = {
                                id: this.ruleForm.id,
                                consignee: this.ruleForm.consignee,
                                sex: this.ruleForm.sex === '女士' ? 0 : 1,
                                phone: this.ruleForm.phone,
                                postcode: this.ruleForm.postcode,
                                provinceCode: this.ruleForm.address[0],
                                cityCode: this.ruleForm.address[1],
                                districtCode: this.ruleForm.address[2],
                                detail: this.ruleForm.detail,
                                label: this.ruleForm.label,
                                isDefault: this.ruleForm.is_default ? 1 : 0
                            }

                            const {data: res} = await axios.post('/addressBook/update', params)
                            if (res.code === 1) {
                                this.$message({
                                    message: res.data,
                                    type: 'success'
                                })
                                this.selectAddress()
                            } else {
                                this.$message({
                                    message: res.msg,
                                    type: 'error'
                                })
                            }
                        } else {
                            this.$message({
                                message: '请按格式填写',
                                type: 'error'
                            })
                        }
                        this.clear()
                        this.showBtn = true

                    }
                    )},
            async getProvince() {
                const {data: res} = await axios.get(`/district/list/${86}`)
                this.province = res.data
                // console.log(this.value)
            },

            handleChange(value) {
                // console.log(value);
                // console.log(this.province);
            },
            async logout() {
                const {data: res} = await axios.post('/user/logout')
                if (res.code === 1) {
                    localStorage.removeItem("user")
                    window.location.href = '/pages/front/index.html'
                }
            },

            getImage(image) {
                return `/common/download?name=${image}`
            },
        },
        mounted() {
        }
    })
</script>
</body>
</html>